.slider-nav {
  position: relative;
}
.sliderWrap {
  position: relative;
}
.sliderWrap,
.sliderWrap .page{
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
/* 使得所有的li在水上 */
.sliderWrap .page{
  position: absolute;
  display: none;
  /*避免动画时闪动*/
  -webkit-backface-visibility: hidden;
}

.slider-nav .arrow{
  width:1.15rem;
  height:.8rem;
  position:absolute;
  left:50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom:1.5rem;
  z-index: 9999;
}

.slider-nav .arrow img{
  width:100%;
  height:auto;
  display:block;
}

.slider-nav .page1{
  display: block;
}

img{
  width: 100%;
}

#page1,#page2,#page3,#page4,#page5{
  background: url(../images/bg.jpg) no-repeat;
  background-size: 100% 100%;
  height: 100%;
}

#page1 .aaa{
  width: 80%;
  margin: 0 auto;
  padding-top: 14%;
  opacity: 0;
}

#page1 .bbb{
  width: 76%;
  margin: 0 auto;
  padding-top: 6%;
  opacity: 0;
}

#page2 .aaa{
  width: 80%;
  margin: 0 auto;
  padding-top: 16%;
  opacity: 0;
}

#page3 .aaa{
  width: 80%;
  margin-left: 10%;
  padding-top: 16%;
  opacity: 0;
}

#page3 .bbb{
  width: 76%; 
  margin: -26% 0 0 18%;
  opacity: 0;
}

#page4 .aaa{
  width: 86%;
  margin-left: 7%;
  padding-top: 16%;
  opacity: 0;
}

#page4 .bbb{
  width: 89%; 
  opacity: 0;
  margin: 5% 0 5% 4%;
}

#page4 .ccc{
  width: 89%; 
  margin-left: 4%;
  opacity: 0;
}

#page5 .aaa{
  width: 90%;
  border-radius: 3px;
  margin-left: 5%;
  padding-top:20%;
  opacity: 0;
}

#page5 .aaa li{
  height: 50px;
  line-height: 50px;
  border-bottom:1px solid #eee;
  background: #fff;
  padding: 0 3%;
}

#page5 .aaa li input{
  border: none;
  height: 40px;
  line-height: 40px;
  margin-top: -5px;
}

#page5 .aaa li span{
  color: #ffae5e;
  margin-right: 8px;
}

#page5 .bbb{
  width: 90%;
  opacity: 0;
  margin: 5% 0 5% 5%;
}

#page5 .ccc, #page5 .ddd{
  width: 30%;
  margin: 0 10%;
  opacity: 0;
  float: left;
}

.slider-nav .arrow  {
  -webkit-animation:toup 1s infinite ease-in;
  animation:toup 1s infinite ease-in;
}
.rotate180 {
  transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
}

#page1 .aaa{
    animation: fadeInRight 0.8s ease-in-out 0.4s forwards;
    -webkit-animation: fadeInRight 0.8s ease-in-out 0.4s forwards;
}

#page1 .bbb{
    animation: largen 1s ease-in-out 0.8s forwards;
    -webkit-animation: largen 1s ease-in-out 0.8s forwards;
}

#page2 .aaa{
    animation: fadeInRight1 0.8s ease-in-out 0.8s forwards;
    -webkit-animation: fadeInRight1 0.8s ease-in-out 0.8s forwards;
}

#page3 .bbb{
    animation: fadeInRight2 0.8s ease-in-out 0.8s forwards;
    -webkit-animation: fadeInRight2 0.8s ease-in-out 0.8s forwards;
}

#page3 .aaa{
    animation: fadeInLeft1 0.8s ease-in-out 0.8s forwards;
    -webkit-animation: fadeInLeft1 0.8s ease-in-out 0.8s forwards;
}

#page4 .aaa{
    animation: fadeInLeft2 0.8s ease-in-out 0.8s forwards;
    -webkit-animation: fadeInLeft2 0.8s ease-in-out 0.8s forwards;
}

#page4 .bbb{
    animation: fadeInRight3 0.8s ease-in-out 1.2s forwards;
    -webkit-animation: fadeInRight3 0.8s ease-in-out 1.2s forwards;
}

#page4 .ccc{
    animation: fadeInLeft3 0.8s ease-in-out 1.6s forwards;
    -webkit-animation: fadeInLeft3 0.8s ease-in-out 1.6s forwards;
}

#page5 .aaa{
    animation: fadeInLeft5 0.8s ease-in-out 0.8s forwards;
    -webkit-animation: fadeInLeft5 0.8s ease-in-out 0.8s forwards;
}

#page5 .bbb{
    animation: fadeInRight4 0.8s ease-in-out 1.2s forwards;
    -webkit-animation: fadeInRight4 0.8s ease-in-out 1.2s forwards;
}

#page5 .ccc{
    animation: fadeIn 1.2s ease-in-out 1.6s forwards;
    -webkit-animation: fadeIn 1.2s ease-in-out 1.6s forwards;
}

#page5 .ddd{
    animation: fadeIn1 1.2s ease-in-out 1.6s forwards;
    -webkit-animation: fadeIn1 1.2s ease-in-out 1.6s forwards;
}

/*从右边过来  fadeInRight*/

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform:translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform:translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@-webkit-keyframes fadeInRight1 {
  0% {
    opacity: 0;
    -webkit-transform:translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight1 {
  0% {
    opacity: 0;
    -webkit-transform:translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@-webkit-keyframes fadeInRight2 {
  0% {
    opacity: 0;
    -webkit-transform:translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight2 {
  0% {
    opacity: 0;
    -webkit-transform:translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@-webkit-keyframes fadeInRight3 {
  0% {
    opacity: 0;
    -webkit-transform:translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight3 {
  0% {
    opacity: 0;
    -webkit-transform:translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@-webkit-keyframes fadeInRight4 {
  0% {
    opacity: 0;
    -webkit-transform:translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight4 {
  0% {
    opacity: 0;
    -webkit-transform:translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@-webkit-keyframes fadeInRight5 {
  0% {
    opacity: 0;
    -webkit-transform:translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight5 {
  0% {
    opacity: 0;
    -webkit-transform:translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

/*从左边过来  fadeInLeft*/

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@-webkit-keyframes fadeInLeft1 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft1 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@-webkit-keyframes fadeInLeft2 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft2 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@-webkit-keyframes fadeInLeft3 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft3 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@-webkit-keyframes fadeInLeft4 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft4 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@-webkit-keyframes fadeInLeft5 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft5 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

/*从右下方过来  fadeInRightBottom*/

@-webkit-keyframes fadeInRightBottom {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRightBottom {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

/*淡出效果  fadeIn*/

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*旋转效果  rotate*/

@-webkit-keyframes rotate {
  0% {
    opacity: 1;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes rotate {
 0% {
    opacity: 1;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

/*底部箭头  toup*/

@-webkit-keyframes toup {
  0% {
    -webkit-transform:translate(-50%,0%);
    opacity: 0;
  }
  100% {
    -webkit-transform:translate(-50%,-50%);
    opacity: 1;
  }
}

@keyframes toup {
  0% {
    transform:translate(-50%,0%);
    opacity: 0;
  }
  100% {
    transform:translate(-50%,-50%);
    opacity: 1;
  }
}

/*从大变小 scale */

@-webkit-keyframes scale{
    0%  {
      opacity: 1;
      -webkit-transform: scale(1,1);
      transform: scale(1,1);
    }
  100%{
    opacity: 1;
    -webkit-transform: scale(0,0);
    transform: scale(0,0);
  }
}

@keyframes scale{
    0%  {
      opacity: 1;
      -webkit-transform: scale(1,1);
      transform: scale(1,1);
    }
  100%{
    opacity: 1;
    -webkit-transform: scale(0,0);
    transform: scale(0,0);
  }
}

/*从小变大 largen */

@-webkit-keyframes largen{
    0%  {
      opacity: 1;
      -webkit-transform: scale(0,0);
      transform: scale(0,0);
    }
  100%{
    opacity: 1;
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
  }
}

@keyframes largen{
    0%  {
      opacity: 1;
      -webkit-transform: scale(0,0);
      transform: scale(0,0);
    }
  100%{
    opacity: 1;
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
  }
}

/*从上到下 scale */

@-webkit-keyframes scales{
    0%  {
      opacity: 1;
      -webkit-transform: translate(0,0);
      transform: translate(0,0);
    }
  100%{
    opacity: 1;
    -webkit-transform: translate(0,1000px);
    transform: translate(0,1000px;);
  }
}

@keyframes scales{
    0%  {
      opacity: 1;
      -webkit-transform: translate(0,0);
      transform: translate(0,0);
    }
  100%{
    opacity: 1;
    -webkit-transform: translate(0,1000px);
    transform: translate(0,1000px);
  }
}

#page5 .bbb{
  width: 90%;
  margin-left: 5%;
}

#page5 .bbb a{
   display: block;
   width: 100%;
   height: 45px;
   line-height: 45px;
   text-align: center;
   background: #ffae5e;
   border-radius: 3px;
   font-size: 16px;
}
